<h1>我是heroes模块</h1>
<!-- | uppercase 变为大写 -->
<!-- 这个时候还没选中，所以neme值为空 -->
<div *ngIf="selectedHero">

    <h2>{{selectedHero.name | uppercase}} Details</h2>
    <div><span>id: </span>{{selectedHero.id}}</div>
    <div>
      <label>name:
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
      </label>
    </div>
  
  </div>


<!-- 这里循环显示出10个英雄 -->
<h2>My Heroes</h2>
<!-- <ul class="heroes"> 
     这里class 中的selected 样式显示，当 hero === selectedHero 时候  
    <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero"
     (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul> -->
<ul class="heroes">
    <li *ngFor="let hero of heroes">
      <a routerLink="/detail/{{hero.id}}">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </a>
      <button class="delete" title="delete hero"
      (click)="delete(hero)">x</button>
  </li>
</ul>

<div>
    <label>Hero name:
      <input #heroName />
    </label>
    <!-- (click) passes input value to add() and then clears the input -->
    <button (click)="add(heroName.value); heroName.value=''">
      add
    </button>
</div>


<hr/>
<h1>我是app-hero-detail</h1>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
